<template>
  <!-- 优质商家交易额统计 -->
    <div id="youzhichartsbar2"></div>
</template>

<script>
import * as echarts from "echarts";
import {saleOrderlast7Days} from "@/api/tenantApis/indexStatistics.js"
export default {
  name: "",
  data() {
    return {
      myChart1: null,
      xData: [],
      nums:[],
      total:0
    };
  },
  props:{
    dataList:{
      default:[],
      type:Array
    }
  },
  watch: {
    dataList: {
      handler: function(val, oldVal) {
        this.total = 0
        this.nums = []
        this.xData = []
        if(val&&val.length){
          
          val.forEach(item => {
            this.total+=Number(item.cot)
            this.nums.push(item.cot)
            this.xData.push(item.transactionType)
          });
          this.$nextTick(() => {
            var chartDom = document.getElementById("youzhichartsbar2");
            this.myChart1 = echarts.init(chartDom);
            this.initCharts1()
            this.$emit('getTotal',this.total)
            // this.getData();
          });
        }
        
      },
      immediate: true,
      deep:true
    },
  },
  created() {},
  mounted() {
    // this.$nextTick(() => {
    //   var chartDom = document.getElementById("youzhichartsbar1");
    //   this.myChart1 = echarts.init(chartDom);
    //   this.getData();
    // });
  },
  methods: {
    getData(){
      saleOrderlast7Days().then(res=>{
        // this.xData = []
        // this.nums = []
        // this.nums = []
        // if(res.data&&res.data.length){
        //   res.data.forEach(r=>{
        //     this.xData.push(r.click_date)
        //     this.nums.push(r.count)
        //     this.nums.push(r.amount)
        //   })
        // }
        this.initCharts1()
      })
    },
    initCharts1() {
      const colors=['#8AAAFF','#A0D7E7']
      let option = {
        title: {
          show: false,
          text: "",
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        color: colors,
        legend: {
          show: false,
          data: [{
              name:'数量',
              textStyle:{
                color:colors[0]
              }
            },
            // {
            //   name:'金额',
            //   textStyle:{
            //     color:colors[1]
            //   }
            // }
          ],
        },
        grid: {
          left: "50",
          right: "5",
          top: "20",
          bottom: "20",
        },

        xAxis: [
        {
            name: '',
            type: 'category',
            axisTick: { show: false },
            axisLine:{
              lineStyle:{
                color: '#EAEBF0'
              }
            },
            nameTextStyle:{
              color: '#333'
            },
            axisLabel:{
              color: '#333'
            },
            boundaryGap:false,
            data: this.xData
          }
        ],
        yAxis: [
          {
              name: '',
              type: 'value',
              position:'left',
              // offset: 80,
              axisLine:{
                show: true,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisLabel:{
                color: '#333',
                // formatter: '{value} 单'
              },
              splitLine:{
                lineStyle:{
                  color:'#EAEBF0',
                  type:'dotted'
                }
              },
              axisTick:{
                show:false
              },
              
            },
            // {
            //   name: '金额',
            //   type: 'value',
            //   position:'right',
            //   // offset: 80,
            //   axisLine:{
            //     show: true,
            //     lineStyle: {
            //       color: colors[1]
            //     }
            //   },
            //   axisLabel:{
            //     color: '#333',
            //     formatter: '{value} 元'
            //   },
            //   splitLine:{
            //     lineStyle:{
            //       color:'#EAEBF0',
            //       type:'dotted'
            //     }
            //   },
            //   axisTick:{
            //     show:false
            //   }
            // }
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            smooth:false,
            emphasis: {
              focus: 'series'
            },
            barMaxWidth:'30',
            data: this.nums,
            areaStyle: {
              color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: 'rgba(138, 170, 255, 0.52)' },
                      { offset: 1, color: 'rgba(138, 170, 255,0)' }
                    ])
            },
            showSymbol:false,
            symbol:'none'
          },
          // {
          //   name: '金额',
          //   type: 'bar',
          //   yAxisIndex: 1,
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   barMaxWidth:'30',
          //   data: this.nums
          // },
        ],
      };
      this.myChart1&&option && this.myChart1.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
#youzhichartsbar2 {
  width: 100%;
  height: 154px;
}
</style>
